<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<pre>
			v-for中key的作用：
				1.数据变化vue如何更新节点：
					渲染真实DOM开销很大，修改某个数据后直接渲染真实DOM会引起整个DOM树的重绘和回流，diff帮我们只更新需要修改的DOM，
					首先会根据真实DOM生成虚拟DOM，当虚拟DOM的节点改变后会生成一个新的Vnode然后和oldnode对比，发现不一致的地方直接修改真实DOM，然后oldnode的值为Vnode
					diff的过程就是调用path函数比较新旧节点，一遍比较一遍给真实DOM打补丁。
				2.虚拟DOM和真实DOM的区别
					虚拟DOM将真实DOM的数据抽离出来，以对象的形式模拟树形结构，例如：
						真实DOM：
						<div>
							<p>123</p>
						</div>
						对应的虚拟DOM（伪代码）：
						let Vnode = {
							tag： 'div',
							children: [{
								tag: 'p',
								text: '123'
							}]
						}
				3.diff的比较方式
					在采取diff算法比较新旧节点的时候，比较只在同级进行不会跨层级比较。
					<div>
						<p>123</p>
					</div>
					<div>
						<span>456</span>
					</div>
		</pre>
	</body>
</html>
